<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="公司名称" prop="company">
                <el-input v-model="form.company" style="width: 60%;"  type="text" placeholder="请输入公司名称" />
            </el-form-item>
            <el-form-item label="网站名称" prop="webName">
                <el-input v-model="form.webName" style="width: 60%;"  type="text" placeholder="请输入网站名称" />
            </el-form-item>
            <el-form-item label="网站介绍" prop="webDesc">
                <el-input v-model="form.webDesc" type="textarea" placeholder="请输入网站介绍"
                          :autosize="{minRows: 1, maxRows: 10}" :style="{width: '60%'}"></el-input>
            </el-form-item>
            <el-form-item label="版权信息" prop="copyright">
                <el-input v-model="form.copyright" type="textarea" placeholder="请输入版权信息"
                          :autosize="{minRows: 1, maxRows: 10}" :style="{width: '60%'}"></el-input>
            </el-form-item>
            <el-form-item label="技术支持" prop="technical">
                <el-input v-model="form.technical" type="textarea" placeholder="请输入技术支持"
                          :autosize="{minRows: 1, maxRows: 10}" :style="{width: '60%'}"></el-input>
            </el-form-item>
            <el-form-item label="所在地区" prop="address">
                <el-cascader size="large" :options="options" v-model="provinces" style="width: 60%;" @change="handleChange" placeholder="请选择省市区"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="addressDetail">
                <el-input v-model="form.addressDetail" type="textarea" placeholder="请输入详细地址"
                          :autosize="{minRows: 1, maxRows: 10}" :style="{width: '60%'}"></el-input>
            </el-form-item>
            <el-form-item label="客服电话" prop="servicePhone">
                <el-input v-model="form.servicePhone" style="width: 60%;"  type="text" placeholder="请输入客服电话" />
            </el-form-item>
            <el-form-item label="个人微信" prop="wx">
                <imageUpload v-model="form.wx" :limit="1" :fileSize="2" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="公众号" prop="gzh">
                <imageUpload v-model="form.gzh" :limit="1" :fileSize="2" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="网站logo" prop="webLogo">
                <imageUpload v-model="form.webLogo" :limit="1" :fileSize="2" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="ICO图标" prop="icoPath">
                <imageUpload v-model="form.icoPath" :limit="1" :fileSize="2" :file-type="ico" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="默认头像" prop="img">
                <imageUpload v-model="form.img" :limit="1" :fileSize="2" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="分享标题" prop="shareTitle">
                <el-input v-model="form.shareTitle" style="width: 60%;"  type="text" placeholder="请输入分享标题" />
            </el-form-item>
            <el-form-item label="分享封面" prop="shareImg">
                <imageUpload v-model="form.shareImg" :limit="1" :fileSize="2" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="广告管理" prop="advertisement">
                <imageUpload v-model="form.advertisement" :limit="5" :fileSize="2" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="服务协议" prop="agreement">
                <Editor v-model="form.agreement" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="隐私政策" prop="policy">
                <Editor v-model="form.policy" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="关于我们" prop="about">
                <Editor v-model="form.about" style="width: 60%;"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </div>
</template>
<script>
import {getBsConfigPage,getBsConfigById,addOrUpdateBsConfig,delBsConfig,exportBsConfig} from "@/api/project/bsConfig/bsConfig";
import imageUpload from '@/components/ImageUpload';
import Editor from "@/components/Editor";
import { regionData } from "element-china-area-data";
export default {
    name: "bsConfig",
    components: {
        imageUpload,
        Editor
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 参数表格数据
            configList: [],
            // 弹出层标题
            title: "",
            open: false,// 是否显示修改或增加的弹出层
            // 日期范围
            dateRange: [],
            // 选择格式
            options: regionData,
            // 省市区
            provinces: [],
            // 查询参数
            queryParams: {
                nowPage: 1,
                pageSize: 10,
                about: "",
                address: "",
                addressDetail: "",
                agreement: "",
                company: "",
                copyright: "",
                createBy: "",
                gzh: "",
                icoPath: "",
                img: "",
                policy: "",
                servicePhone: "",
                shareImg: "",
                shareTitle: "",
                technical: "",
                updateBy: "",
                webDesc: "",
                webLogo: "",
                webName: "",
                wx: "",
            },
            // 表单参数
            form: {},
            showOpen: false,//是否显示查看工作内容弹出层
            showForm: {},
            // 表单校验
            rules: {

            },
        };
    },
    created() {
        this.getPage();
    },
    methods: {
        /** 查询参数列表 */
        getPage(e) {
            this.loading = true;
            let params = '';
            if (e) {
                params = {nowPage: e.page, pageSize: e.limit}
            } else {
                params = {nowPage: this.queryParams.nowPage, pageSize: this.queryParams.pageSize}
            }
            getBsConfigPage(params).then(response => {
                if(response.data.records.length) {
                    this.form = response.data.records[0];
                    var split = this.form.address.split("/");
                    this.provinces = [split[0],split[1],split[2]];
                    this.total = response.data.total;
                    this.loading = false;
                }
            })
        },
        /**
         *
         */
        handleChange(e) {
            this.form.address = e[0] + "/" +e[1] + "/" + e[2];
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                about: "",
                address: "",
                addressDetail: "",
                agreement: "",
                company: "",
                copyright: "",
                createBy: "",
                createTime: "",
                gzh: "",
                icoPath: "",
                img: "",
                policy: "",
                servicePhone: "",
                shareImg: "",
                shareTitle: "",
                technical: "",
                updateBy: "",
                updateTime: "",
                webDesc: "",
                webLogo: "",
                webName: "",
                wx: "",
            };
            this.showForm = {
                about: "",
                address: "",
                addressDetail: "",
                agreement: "",
                company: "",
                copyright: "",
                createBy: "",
                createTime: "",
                gzh: "",
                icoPath: "",
                img: "",
                policy: "",
                servicePhone: "",
                shareImg: "",
                shareTitle: "",
                technical: "",
                updateBy: "",
                updateTime: "",
                webDesc: "",
                webLogo: "",
                webName: "",
                wx: "",
            };
            this.resetForm("form");
            this.resetForm("showForm");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            let about = this.queryParams.about || '';
            let address = this.queryParams.address || '';
            let addressDetail = this.queryParams.addressDetail || '';
            let agreement = this.queryParams.agreement || '';
            let company = this.queryParams.company || '';
            let copyright = this.queryParams.copyright || '';
            let createBy = this.queryParams.createBy || '';
            let gzh = this.queryParams.gzh || '';
            let icoPath = this.queryParams.icoPath || '';
            let img = this.queryParams.img || '';
            let policy = this.queryParams.policy || '';
            let servicePhone = this.queryParams.servicePhone || '';
            let shareImg = this.queryParams.shareImg || '';
            let shareTitle = this.queryParams.shareTitle || '';
            let technical = this.queryParams.technical || '';
            let updateBy = this.queryParams.updateBy || '';
            let webDesc = this.queryParams.webDesc || '';
            let webLogo = this.queryParams.webLogo || '';
            let webName = this.queryParams.webName || '';
            let wx = this.queryParams.wx || '';
            let time = this.dateRange || '';
            let params = {
                about: about,
                address: address,
                addressDetail: addressDetail,
                agreement: agreement,
                company: company,
                copyright: copyright,
                createBy: createBy,
                gzh: gzh,
                icoPath: icoPath,
                img: img,
                policy: policy,
                servicePhone: servicePhone,
                shareImg: shareImg,
                shareTitle: shareTitle,
                technical: technical,
                updateBy: updateBy,
                webDesc: webDesc,
                webLogo: webLogo,
                webName: webName,
                wx: wx,
                startTime: time[0],
                endTime: time[1],
                nowPage: 1,
                pageSize: this.queryParams.pageSize
            };
            getBsConfigPage(params).then(res => {
                if (res.code == 200) {
                    this.configList = res.data.records;
                    this.total = res.data.total;
                    this.loading = false;
                }
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.queryParams.about = '';
            this.queryParams.address = '';
            this.queryParams.addressDetail = '';
            this.queryParams.agreement = '';
            this.queryParams.company = '';
            this.queryParams.copyright = '';
            this.queryParams.createBy = '';
            this.queryParams.gzh = '';
            this.queryParams.icoPath = '';
            this.queryParams.img = '';
            this.queryParams.policy = '';
            this.queryParams.servicePhone = '';
            this.queryParams.shareImg = '';
            this.queryParams.shareTitle = '';
            this.queryParams.technical = '';
            this.queryParams.updateBy = '';
            this.queryParams.webDesc = '';
            this.queryParams.webLogo = '';
            this.queryParams.webName = '';
            this.queryParams.wx = '';
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加配置管理信息";
        },
        //多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length != 1;
            this.multiple = !selection.length
        },
        /** 查看按钮操作 */
        handleShow(row) {
            this.reset();
            const id = row.id || '';
            getBsConfigById({id}).then(response => {
                this.showForm = response.data;
                this.showOpen = true;
                this.title = "配置管理详情";
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || '';
            getBsConfigById({id}).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改配置管理信息";
            });
        },
        cancelShow: function () {
            this.showOpen = false;
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id !== "") {
                        addOrUpdateBsConfig(this.form).then(res => {
                            if (res.code == 200) {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getPage();
                            } else {
                                this.msgError(res.msg);
                            }
                        })
                    } else {
                        addOrUpdateBsConfig(this.form).then(res => {
                            if (res.code == 200) {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getPage();
                            } else {
                                this.msgError(res.msg);
                            }
                        })
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm('是否确认删除配置管理编号为"' + ids + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delBsConfig(ids);
            }).then(() => {
                this.getPage();
                this.msgSuccess("删除成功");
            }).catch(function () {
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有配置管理数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return exportBsConfig(queryParams);
            }).then(res => {
                this.download(res.msg);
            }).catch(function () {
            });
        },
    }
};
</script>
<style>

</style>
